import { WordCloud } from '@ant-design/plots';
import React from 'react';
import { countUserbyDept } from '../../services/userServices';

class CloudChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        data: [],
        layout: { spiral: 'rectangular' },
        colorField: 'deptName',
      },
    };
    this.initData();
  }

  adjustData = (data) => {
    data.forEach((item) => {
      item.value = item.count;
      item.text = item.deptName;
    });
  };

  initData = async () => {
    try {
      const response = await countUserbyDept();
      const { data } = response;
      this.adjustData(data);
      this.setState({
        config: {
          ...this.state.config,
          data: data,
        },
      });
    } catch (error) {
      console.log(error.message || 'Failed to count user');
    }
  };

  render() {
    return (
      <WordCloud {...this.state.config} />
    );
  }
}

export default CloudChart;
